<template>
  <div class="functional-box">
    <p>pageRoute: #/</p>
    <br />
    <template v-if="list.length > 0">
      <el-tag v-for="item in list" :key="item.id">
        {{ item.title }}
      </el-tag>

      <FunctionDemo2 :data="list"></FunctionDemo2>
    </template>
    <el-skeleton animated :rows="6" v-else />
  </div>
</template>

<script>
import FunctionDemo2 from './FunctionalDemo2.vue'
export default {
  name: 'functional-demo',
  components: { FunctionDemo2 },
  data() {
    return {
      list: []
    }
  },
  async created() {
    const list = await this.$api.recommended()
    this.list = list
  }
}
</script>

<style lang="less" scoped>
.functional-box {
  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
